/* 先请求参数    状态和分类类别后面会修改   */
let data = {
    //pagenum和pagesize是默认参数,后面还需要动态改变
    pagenum: 1,  //分页页码
    pagesize: 2,   //每页显示多少条数据
    // status:'已发布',  //状态
    // cate_id:2     //分类列表
}

// 文章总数初始化 全局变量
let t = 0

// -------------------------------- 获取文章列表 ------------------------------------
function renderArticle() {
    $.ajax({
        url: '/my/article/list',
        data: data,
        success: function (res) {
            //console.log(res);
            let str = '';
            res.data.forEach(item => {
                str += `
                    <tr>
                    <td>${item.title}</td>
                    <td>${item.cate_name}</td>
                    <td>${item.pub_date}</td>
                    <td>${item.state}</td>
                    <td>
                        <a href="./edit.html?id=${item.id}" class="layui-btn layui-btn-normal layui-btn-xs">编辑</a>
                        <button type="button"class="layui-btn layui-btn-xs  layui-btn-danger">删除</button>
                    </td>
                  </tr>
                `
            });
            $('tbody').html(str);

            // 获取文章总数
            // console.log(res.total);


            /* 解决:把函数放到Ajax请求后面执行,然后通过传参的方法 */
            //获取文章总数后调用showPage()
            showPage(res.total);

        }


    })
};
renderArticle();



// -----------------------   分页  内置模块的分页----------------------------

// 获取Ajax请求数据,因为Ajax是异步请求,在函数最后才完成,所以这个函数showPage比Ajax完成拿到数据先执行,这样showPage()就拿不到Ajax获取的数据
/* 解决:把函数放到Ajax请求后面执行,然后通过传参的方法 */

// t是获取文章总数的参数
function showPage(t) {
    let laypage = layui.laypage;
    //执行一个laypage实例
    laypage.render({
        // 基础参数选项  
        elem: 'page', //注意，这里的 test1 是 ID，不用加 # 号  放在那个标签里的ID名
        count: t,//数据总数，从服务端得到
        curr: data.pagenum,  //当前页面  是Ajax请求一致的值 
        limit: data.pagesize,  //每页数据条数  是Ajax请求一致的值
        limits: [2, 3, 5, 10], //每页条数的选择项。
        /* 
        自定义排版。可选值有：count（总条目输区域）、prev（上一页区域）、page（分页区域）、next（下一页区域）、limit（条目选项区域）、refresh（页面刷新区域。注意：layui 2.3.0 新增） 、skip（快捷跳页区域）
        */
        layout: ['limit', 'prev', 'page', 'next', 'count', 'skip'],

        /* 内置模块的 laypage.render属性jump */

        /* 为什么要用它？
            因为jump()中obj包含了当前的分页的所有参数，例如curr，limit
            点击按钮切换就可以调用当前的分页的参数获取当前页面obj.curr的值，每页数据条数obj.limit的值obj.curr的值 
            然后我们就可以拿来改变data.pagenum和data.pagesize的值，完成切换后数据改变
        */

        // 进入页面之后，jump马上先执行一次，此时first是true，点击按钮切换页码时候，jump也会执行，此时first是undefined
        jump: function (obj, first) {
            // 切换页码时候，jump也会执行下面的代码

            //obj包含了当前分页的所有参数，比如：
            //console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
            //console.log(obj.limit); //得到每页显示的条数

            // 因为进入页面之后，jump马上先执行一次，如果直接赋值改变data.pagenum和data.pagesize的值然后执行获取文章列表(刷新，重新渲染数据)，会进入死循环，就需要给它一个限制，要等点击按钮切换时才执行

            //首次不执行  如果不是第一次就执行
            if (!first) {
                //do something
                data.pagenum = obj.curr;
                data.pagesize = obj.limit;
                renderArticle();
            }
        }

    });
};

//  ----------------------获取所有分类 渲染select > option-----------------------------

    let form = layui.form
    $.ajax({
        url: '/my/category/list',
        success: function (res) {
           //console.log(res)
            // 动态添加select框之后，发现页面中的下拉框看不见了，需要使用 form.render() 方法更新渲染
            let str = '';
            res.data.forEach(item => {
                str += `<option value="${item.id}">${item.name}</option>`
            });
            // html()方法会把#category的子级元素全部覆盖
            // $('#category').html(str);
            $('#category').append(str)
            //console.log(str);
            // 更新渲染
            // form.render('select', 'lay-filter属性值');
            form.render('select');
        }

    })
    


    // 筛选,思路是改变Ajax请求的参数,然后重新渲染
    $('#search').on('submit',function(e){
        e.preventDefault();
        //获取下拉框的值就是分类的  类别的cate_id值

        //第一个下拉款文章类别
        let cate_id = $('#category').val();
        //第二个是文章状态
        let state = $('#state').val();

        //这里的data的最开始定义的默认属性 
        // 先判断cate_id是否为空,如是有cate_id值就执行data.cate_id = cate.id否则删除
        cate_id ? data.cate_id = cate_id : delete data.cate_id;
        
        state ? data.state = state : delete data.state ;

        // 改变请求参数数据后更新页面

        // 筛选时候,pagenum要为1
        // 不然在你点击第n页时,实际筛选数据只有1个,这是pagenum应该为1,但是你没改成1而还是n,这样就跳出好多个分页页数
        data.pagenum = 1;

        renderArticle();
    });

    
    

